<template>
  <div>
    <div class="search">
      <yd-search placeholder="我去哪"></yd-search>
    </div>
    <div class="main-body">
      <div class="left-body">
        <p style="font-size:.3rem">葫芦岛第一攻略</p>
        <p style="color:red;padding-left:30px;padding-top:15px;">发布时间 2017-03-12</p>
        <p style="font-size:.17rem;padding-top:15px;">辽宁省葫芦岛市龙港区北港经济开发区</p>
        <p style="padding-top:15px;">
          <span style="float:left;font-size:.28rem;padding-top:5px;">评级:</span><yd-rate slot="left" v-model="rate4" active-color="#FFA500" size=".4rem"></yd-rate>
        </p>
        <div style="margin-top:10px;text-align:center">
          <hd-svg-icon name="hd-dianzan" slot="left" size="18px"></hd-svg-icon><span style="margin-left:10px;font-size:15px;">20</span>
          <hd-svg-icon name="hd-chakan" slot="left" size="18px" style="margin-left:15px"></hd-svg-icon><span style="margin-left:10px;font-size:15px;">20</span>
        </div>
      </div>
      <div class="right-body">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512536240530&di=6eff02cca1fdb69ff66968f88040d1c9&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201303%2F07%2F20130307021639_mCM5W.jpeg" class="right-body-img" alt="">
      </div>
    </div>
    

    <div class="main-body">
      <div class="left-body">
        <p style="font-size:.3rem">葫芦岛第一攻略</p>
        <p style="color:red;padding-left:30px;padding-top:15px;">发布时间 2017-03-12</p>
        <p style="font-size:.17rem;padding-top:15px;">辽宁省葫芦岛市龙港区北港经济开发区</p>
        <p style="padding-top:15px;">
          <span style="float:left;font-size:.28rem;padding-top:5px;">评级:</span><yd-rate slot="left" v-model="rate4" active-color="#FFA500" size=".4rem"></yd-rate>
        </p>
        <div style="margin-top:10px;text-align:center">
          <hd-svg-icon name="hd-dianzan" slot="left" size="18px"></hd-svg-icon><span style="margin-left:10px;font-size:15px;">20</span>
          <hd-svg-icon name="hd-chakan" slot="left" size="18px" style="margin-left:15px"></hd-svg-icon><span style="margin-left:10px;font-size:15px;">20</span>
        </div>
      </div>
      <div class="right-body">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512536240530&di=6eff02cca1fdb69ff66968f88040d1c9&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201303%2F07%2F20130307021639_mCM5W.jpeg" class="right-body-img" alt="">
      </div>
    </div>
    <div class="main-body">
      <div class="left-body">
        <p style="font-size:.3rem">葫芦岛第一攻略</p>
        <p style="color:red;padding-left:30px;padding-top:15px;">发布时间 2017-03-12</p>
        <p style="font-size:.17rem;padding-top:15px;">辽宁省葫芦岛市龙港区北港经济开发区</p>
        <p style="padding-top:15px;">
          <span style="float:left;font-size:.28rem;padding-top:5px;">评级:</span><yd-rate slot="left" v-model="rate4" active-color="#FFA500" size=".4rem"></yd-rate>
        </p>
        <div style="margin-top:10px;text-align:center">
          <hd-svg-icon name="hd-dianzan" slot="left" size="20px"></hd-svg-icon><span style="margin-left:10px;font-size:15px;">20</span>
          <hd-svg-icon name="hd-chakan" slot="left" size="20px" style="margin-left:15px"></hd-svg-icon><span style="margin-left:10px;font-size:15px;">20</span>
        </div>
      </div>
      <div class="right-body">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512536240530&di=6eff02cca1fdb69ff66968f88040d1c9&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201303%2F07%2F20130307021639_mCM5W.jpeg" class="right-body-img" alt="">
      </div>
    </div>
    
  </div>
</template>
<script>
export default {
  name: 'myraiders',
  data() {
    return {
      rate4: 4
    }
  }
}
</script>

<style>
  .search-icon{
  width: 9%;
  }
  .yd-search-input>.search-input{
    border-radius: 8px;
  }
  .yd-search-input{
    background-color: #218B98;
    font-size: .25rem;
  }
</style>
<style scoped>
.main-body{
    width:100%;
    height:150px;
    margin-top:20px;
    margin-bottom: 40px;
  }
  .left-body{
    width:40%;
    height:100%;
    float:left;
  }
  .right-body{
    width:60%;
    height:100%;
    float:left;
  }
  .right-body-img{
    width:100%;
    height:100%;
  }
</style>

